<template>
	<view class="coupon-code">
		<view class="code-main">
			<view class="tx-ag txtb">{{couponcode.name}}</view>
			<w-barcode class="opbx" ref="barcode" :options="options1"></w-barcode>
			<view class="tx-ag">{{couponcode.coupon_receive_id}}</view>
			<view class="tx-ag">到期时间:{{couponcode.coupon_receive_effective}}</view>
			<w-qrcode class="opbx" :options="options2"></w-qrcode>
			<view class="tx-ag">{{couponcode.coupon_receive_id}}</view>
		</view>
	</view>
</template>

<script>
import { formatDate, getDiff } from '@/utils/moment/index.js';
export default {
	data(){
		return {
			couponcode:{},
			options1:{
				color: ['#000'], // 条形码的颜色 默认黑色
				bgColor: '#FFFFFF', // 背景色
				width: 500, // 宽度 单位rpx
				height: 100, // 高度 单位rpx
				code: 'E57890543271985',// 生成条形码的值
			},
			options2:{
				code: '',// 生成二维码的值
				border:{
					color: ['#F27121','#8A2387','#1b82d2'], //边框颜色支持渐变色 最多10种颜色 如果默认黑色此属性不需要传
					opacity: 0.6, //边框透明度 默认为1不透明 0~1
					lineWidth: 6, //边框宽度
					degree: 15 //边框圆角度数 默认5
				},
				size: 500,// 460代表生成的二维码的宽高均为460rpx
			},
		}
	},
	onLoad(opt){
		this.couponcode = JSON.parse(decodeURIComponent(opt.urdata))
		this.couponcode.coupon_receive_effective = formatDate(this.couponcode.coupon_receive_effective, 'YYYY-MM-DD hh:mm')
		this.couponcode.start_effective = this.couponcode.start_effective.substr(0, 10)
		this.couponcode.end_effective = this.couponcode.end_effective.substr(0, 10)
		this.options1.code = this.couponcode.coupon_receive_id
		this.options2.code = this.couponcode.coupon_receive_id
	}
}
</script>

<style lang="scss" scoped>
	.coupon-code{
		background:-webkit-linear-gradient(to top, #45B649, #00c3ff);
		background:linear-gradient(to top,#45B649,#00c3ff);
		padding:26rpx;
		height:100vh;
		.code-main{
			background-color: #fff;
			margin-top: 100rpx;
			display:flex;
			flex-direction: column;
			justify-content: center;
			line-height: 66rpx;
			padding:60rpx 40rpx;
		}
		.opbx{
			width: 500rpx;
			margin: auto;
		}
		.tx-ag{
			text-align: center;
		}
		.txtb{
			font-weight: bold;
			font-size: 28rpx;
		}
	}
	
</style>